<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>socket.io 示例</title>
  </head>
  <body>
    <button>发消息给服务器</button>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
    <script>
      // 建立连接
      const socket = io('http://localhost:3000', {
        transports: ['websocket', 'polling'],
      })
      // 监听连接建立状态
      socket.on('connect', () => {
        console.log('建立连接...')
      })
      // 监听连接断开状态
      socket.on('disconnect', () => {
        console.log('断开连接...')
      })

      // 自定义事件，事件是用来传递数据的(接收服务器返回的数据)
      socket.on('sendToClient', (msg) => {
        console.log('服务器给我回消息了:', msg)
      })

      document.querySelector('button').addEventListener('click', function () {
        // 触发服务端定义的事件，将数据传递给服务端
        // 给服务器发送数据
        socket.emit('send-some-data', '你好吗，有没有吃饭呀~ 嘤嘤嘤', () => {
          //
        })
      })
    </script>
  </body>
</html>
